<template>
  <div class="dashboard-container">
    <el-row :gutter="20" style="margin-bottom:32px;">
      <el-col :xs="{span: 10}" :sm="{span: 10}" :md="{span: 10}" :lg="{span: 8}" :xl="{span: 8}">
        <el-card style="margin-left:8px ">
          <div slot="header" class="clearfix">
            <span>天气预报</span>
          </div>
          <div style="position:relative;">
            <div>
              <span>当前城市：</span>
              <span>{{ weather.city }}</span>
            </div>
            <div style="padding-top:15px;">
              <span>温度：</span>
              <span>{{ weather.wendu }}°C</span>
            </div>
            <div style="padding-top:15px;">
              <span>{{ weather.desc }}</span>
            </div>
            <div style="padding-top:15px;">
              <span>湿度：</span>
              <span>{{ weather.shidu }}</span>
            </div>
            <div style="padding-top:15px;">
              <span>PM2.5：</span>
              <span>{{ weather.pm25 }}</span>
            </div>
            <div style="padding-top:15px;">
              <span>空气质量：</span>
              <span>{{ weather.quality }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="{span: 10}" :sm="{span: 10}" :md="{span: 10}" :lg="{span: 8}" :xl="{span: 8}">
        <el-card style="margin-left:8px ">
          <el-alert
            title="挫折是一块石头，对于弱者来说它是拌脚石，让你停步不前。而对于强者来说它是垫脚石，使你站得更高。希望使用piece系统的每个人，无论过程怎样，结局都是美好的。。。"
            :closable="false"
          >
            <a
              target="_blank"
              href="https://gitee.com/zy0fy/vue-piece-blog"
            ><el-link type="success">vue-piece-blog</el-link></a>
          </el-alert>
        </el-card>
      </el-col>
      <el-col :xs="{span: 10}" :sm="{span: 10}" :md="{span: 10}" :lg="{span: 8}" :xl="{span: 8}">
        <el-card shadow="never">
          <center>广告位招商</center>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="weather.chartData" />
    </el-row>

    <el-row style="background:#fff;">
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px;width:100%;">
        <el-form ref="queryForm" :inline="true" :model="queryData">
          <el-form-item prop="selBLine">
            <el-input v-model="queryData.selBLine" placeholder="公交线路" @blur="changeBLine" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.selBDir" placeholder="请选择线路方向" @change="changeBdir">
              <el-option
                v-for="item in selBDirs"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.selBStop" placeholder="请选择站点">
              <el-option
                v-for="item in selBStops"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" round icon="el-icon-search" @click="changeBStop">
              搜索公交路线
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>

    <el-row style="background:#fff;">
      <el-card shadow="hover" style="width:100%;">
        <div ref="busTimeInfo" />
      </el-card>
    </el-row>

    <el-row style="background:#fff;">
      <el-card shadow="hover" style="width:100%;">
        <baidu-map
          :style="'{width: 100%; height: ' + mapHeight + 'px;}'"
          ak="Ykv5kItIHoOtTfK7VNkY1E0MbHpwq8Xm"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="false"
          @ready="handlerInitMap"
        >
          <bm-control>
            <bm-auto-complete v-model="keyword" :sug-style="{ zIndex: 99999 }">
              <el-input v-model="keyword" placeholder="请输入地名关键字" />
            </bm-auto-complete>
          </bm-control>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
          <bm-local-search :keyword="keyword" :auto-viewport="true" />
          <bm-marker :position="center" :dragging="true" :top="true" :mass-clear="false" @click="showInfo=true">
            <bm-info-window :show="showInfo" style="font-size:13px" @close="showInfo=false" @open="showInfo=true">
              <h4>我在这里</h4>
              <span class="small">地址：北京市通州区</span>
            </bm-info-window>
          </bm-marker>
          <bm-bus :keyword="selBLineNo" :auto-viewport="true" :select-first-result="true" :location="location" />
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :auto-location="false" :show-address-bar="true" />
        </baidu-map>
      </el-card>
    </el-row>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import LineChart from './components/LineChart'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmControl from 'vue-baidu-map/components/controls/Control.vue'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
import BmAutoComplete from 'vue-baidu-map/components/others/AutoComplete.vue'
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
import BmBus from 'vue-baidu-map/components/search/Bus.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  name: 'About',
  components: {
    LineChart,
    BaiduMap,
    BmControl,
    BmNavigation,
    BmAutoComplete,
    BmLocalSearch,
    BmGeolocation,
    BmBus,
    BmMarker,
    BmInfoWindow
  },
  data() {
    return {
      weather: {
        city: '',
        wendu: '',
        desc: '',
        shidu: '',
        pm25: '',
        quality: '',
        chartData: {
          title: '未来一周天气变化',
          legend: [
            { name: '最高气温' },
            { name: '最低气温' }
          ],
          xAxisData: [],
          yAxisLabel: '{value} °C',
          expectedLabel: '最高气温',
          expectedData: [],
          actualLabel: '最低气温',
          actualData: []
        }
      },
      ak: 'Ykv5kItIHoOtTfK7VNkY1E0MbHpwq8Xm',
      center: { lng: 116.694145, lat: 39.874355 },
      zoom: 17,
      showInfo: true,
      queryData: {
        selBLine: '',
        selBDir: '',
        selBStop: ''
      },
      mapHeight: document.documentElement.scrollHeight - 326,
      selBDirs: [],
      selBStops: [],
      selBLineNo: '',
      location: '北京',
      keyword: ''
    }
  },
  computed: {
    ...mapState({
      user: state => state.user.info
    })
  },
  mounted() {
    this.handleWeatherData()
  },
  methods: {
    handleWeatherData() {
      this.$http({
        url: '/admin/weather',
        method: 'get'
      }).then(response => {
        this.weather.city = response.param.today.city
        this.weather.wendu = response.param.today.wendu
        let desc = response.param.today.high
        desc += ' ' + response.param.today.low
        desc += ' ' + response.param.today.fx
        desc += ' ' + response.param.today.fl
        this.weather.desc = desc
        this.weather.shidu = response.param.today.shidu
        this.weather.pm25 = response.param.today.pm25
        this.weather.quality = response.param.today.quality
        this.weather.chartData.xAxisData = response.param.forecast.category
        this.weather.chartData.expectedData = response.param.forecast.high
        this.weather.chartData.actualData = response.param.forecast.low
      }).catch(() => {})
    },
    handlerInitMap({ BMap, map }) {

    },
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    changeBLine() {
      this.queryData.selBDir = ''
      this.queryData.selBStop = ''
      this.selBDirs = []
      this.selBStops = []
      this.busTimeInfo = ''
      const busNo = this.queryData.selBLine
      if (busNo) {
        this.$http.get('/admin/system/map/selBDir', {
          params: {
            'selBLine': busNo
          }
        }).then(response => {
          const doms = this.$htmlparser2.parseDOM(response.param)
          doms.forEach(element => {
            this.selBDirs.push({
              label: element.children[0].data,
              value: element.attribs.value
            })
          })
        }).catch(() => {})
      }
    },
    changeBdir() {
      this.$http.get('/admin/system/map/selBStop', {
        params: {
          'selBDir': this.queryData.selBDir
        }
      }).then(response => {
        const doms = this.$htmlparser2.parseDOM(response.param)
        this.selBLineNo = this.queryData.selBLine
        doms.forEach(element => {
          this.selBStops.push({
            label: element.children[0].data,
            value: element.attribs.value
          })
        })
      }).catch(() => {})
    },
    changeBStop() {
      this.$refs.busTimeInfo.innerHTML = ''
      this.$http.get('/admin/system/map/selBTime', {
        params: {
          'selBLine': this.queryData.selBLine,
          'selBDir': this.queryData.selBDir,
          'selBStop': this.queryData.selBStop
        }
      }).then(response => {
        const obj = JSON.parse(response.param)
        this.$refs.busTimeInfo.innerHTML = obj.html
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
</style>
<style>
  .map {
    width: 100%;
    height: 360px;
  }
  .inquiry_header {
    text-align: center;
  }
  .inquiry_header .inner {
    color: orangered;
  }
  .inquiry_main {
    text-align: center;
    margin-top: 5px;
  }
  .inquiry_main ul li div i.busc {
    background: url('') center;
    display: block;
    width: 15px;
    height: 15px;
    background-size: contain;
  }
  .inquiry_main ul {
    display: inline-flex;
  }
  .inquiry_main li {
    width: 12px;
    margin-right: 5px;
    list-style:none;
  }
  .inquiry_footer {
    display: none;
    text-align: center;
    margin-top: 3px;
  }
  .q_examination {
    margin-left: 25px;
    padding: 10px 10px;
    border: 2px dashed;
  }
</style>
